使用 HTML/CSS/JS 進行驗證 (Validation)

許多網站提供允許使用者與頁面互動並向服務器提出請求或是提交數據的功能。然而，並非所有使用者都會按預期來操作行事。

今天要學習的是在生活上比較現實實用, 馬上可以現學現賣的 貨, 也就是…

使用者輸入驗證 (User Input Validation)

使用者輸入驗證是確保任何使用者輸入的格式正確且正確/有效的過程。

大家現在腦海裡有沒有浮現任何在與網頁互動時, 輸入驗證 (input validation) 有關的範例呢?

• 防止空白值 (blank values) 的出現（例如: 電子郵件地址）
• 驗證值的格式 (format) 和範圍 (range)（例如: 郵政編碼必須是 5 位整數）
• 驗證值的類型（例如: 整數、實數、貨幣、電話號碼、身分 id、郵政地址、電子郵件地址、數據、信用卡號……）
• 額外的確認層 (layer of confirmation)（例如: 使用者需要輸入了兩次電子郵件，而且兩者必須匹配相符）

在我們的現實生活中, 你很有可能遇過…

在填寫表單時, 因為你填寫表單的 data 沒有符合表單要求的格式 (format) 的話, 那麼網頁的表單就會回覆給你 feedback, 像是以下的錯誤訊息 等等

Credit: Eva Air Booking

客戶端站點驗證是適合可用性/易用性 (Usability) 的, 因為如果出現問題, 使用者可以從 script 中獲得即時的 feedback。
並且使用者在得到一些 feedback 之前不必先將數據發送到服務器 (server)。

表單 Example

    <form>
      <label for="city">City: </label>
      <input name="city" id="city" type="text">
      <label for="state">State: </label>
      <input name="state" id="state" type="text">
      <label for="zip">ZIP: </label>
      <input name="zip" id="zip" type="number">
      <label for="departure-time">Choose a time for your departure:</label>
      <input name="departure-time" id="departure-time" type="datetime-local" 
           value="2022-10-16T15:30">
      <button id="submit-btn">Submit!</button>
    </form>

以上的 HTML5 code, 在這邊稍微提一下 for 屬性: 表示此 lable 與表單內哪個元素綁定在一起

<label for="city">City:</label>
<input name="city" id="city" type="text">

將文本 City: 和 form 內的城市文本輸入控件 city 綁定起來, label 的 for 屬性質和輸入控件的 id 會是相同的。

我們有幾種方式可以來驗證這個 user input

• 客戶端 (Client-side): HTML5 表單元素和輸入標籤 (tag) 屬性
• 客戶端 (Client-side): 使用 JavaScript 去做表單驗證 (於要把表單的 data 送到 server 前)
• 伺服器端 (Server-side): 之後我們會再提到這部分

HTML5 輸入驗證

我們已經了解了一些使用 HTML5 標籤來要求某些特定類型輸入 (certain types of input) 的方法，而方法是 向 <input> 標籤添加屬性 來幫助驗證。

    <input type="number">

我們可以用 min 或 max 限制上下箭頭 (min 屬性可以指定 元素的最小值; max 屬性指定 元素的最大值)。
適用的輸入類型: 本地日期和時間, 月份, 幾周, 數字和某個範圍

    <input type="number" min=0>

要求輸入字段中 (input field) 必須有一個值，我們可以添加 required

    <input type="number" required>

為了防止使用者輸入錯誤的值，我們可以在 required 屬性中加上 Regular Expression

    <input type="number" required="\d+">

\d+ 是什麼?
\d 是數字（[0-9] 範圍內的字符）
+ 表示一次或多次
→ \d+ 表示 match 一個或多個數字
Example: string “10” 是有符合 required=”\d+” 驗證的

Built-in Form Validation

可以為 HTML 文檔中的表單元素添加屬性, 以幫助使用者確保提交的數據符合某些設定的要求。

參考文件: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

了解完以上的 HTML5 驗證方法之後, 讓我們把這些方法套到原本的表單 example 上吧

表單是 HTML 元素，可用於根據 name 屬性去 打包 (package) 使用者輸入值 (user input values)，通常與 POST 請求一起使用。

HTML

    <form>
      <label for="city">City: </label>
      <input name="city" id="city" type="text" required>
      <label for="state">State: </label>
      <input name="state" id="state" type="text" size="3" maxlength="3" required>
      <label for="zip">ZIP: </label>
      <input name="zip" id="zip" type="number" size="6" min=100000 max=999999 required>
      <label for="departure-time">Choose a time for your departure:</label>
      <input name="departure-time" type="datetime-local" id="departure-time"
           value="2022-10-16T15:30"
           min="2022-10-09T00:00" max="2022-10-23T00:00" required>
      <button id="submit-btn">Submit!</button>
    </form>

CSS

    label {
        display: block;
        font: 1rem 'Fira Sans', sans-serif;
    }
    input,
    label {
        margin: .4rem 0;
    }

Before filling out the form:

After filling out the form:

當使用者沒有依照表單的預期來填寫的話, 比如 ZIP 輸入的格式沒有符合 ZIP 值須大於或等於 100000, 否則使用者要送出表單時, 便會出現以下的錯誤來提醒使用者重新輸入

當使用者沒有填寫到 City 便送出表單時, 藉由 Validation 的機制, 使用者會得到即時的 feedback: 請填寫這個欄位, 也就是 "This field is required" (You can't leave this field blank), 因為 "city" 是設為 required 屬性

同時, 使用者要輸入日期時間的時候, 也會讓使用者清楚明白的看出我們設定的 HTML5 Validation, 也就是對選擇日期和時間的範圍限制, 範例的部分我們是設定最早的日期是10/09, 最晚的日期是10/23

有興趣的話 可以來這邊看看喔: https://www.w3spaces-preview.com/tywebdevpractice/form_validation.html